<template>
    <view :class="themeName">
        <u-tabs font-size="28" name="name" inactive-color="#333" :active-color="themeColor" :list="lists"
            :is-scroll="false" :current="current" @change="change">
        </u-tabs>
		<mescroll-uni ref="mescrollRef" bgColor="white" top="90rpx" 
		@init="mescrollInit" :down="{ auto: false }" :up="upOption" @down="downCallback" @up="upCallback">
			<view class="speck-list m-t-30" v-for="(item, index) in list" :key="index">
				<view class="flex m-b-26">
 					<image class="headimg m-r-30" :src="item.avatar" mode=""></image>
					<view class="black bold">{{item.nickname}}</view>
				</view>
				<view class="boxes">
					<view class="flex row-between lighter">
						<view>已购 {{item.title}}</view>
						<view>{{item.time}}</view>
					</view>
					<view class="m-t-20 m-b-20 black">{{item.comment}}</view>
					<div class="flex flex-wrap">
						<div v-for="(k, m) in item.images" :key="m" style="width: 33.33%;">
							<image @click="previewImage(k,item.images)" class="m-b-10" style="width: 200rpx;height:200rpx;" :src="k" mode=""></image>
						</div>
					</div>
				</view>
			</view>
		</mescroll-uni>
    </view>
</template>

<script>
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
    import { plfl,plList } from '@/api/store.js';
    export default {
        mixins: [MescrollMixin],
        data() {
            return {
                lists: [{
                    name: '全部(0)',
                    isShow: true,
                    id: 0
                },{
                    name: '好评(0)',
                    isShow: false,
                    id: 2
                }, {
                    name: '中评(0)',
                    isShow: false,
                    id: 3
                }, {
                    name: '差评(0)',
                    isShow: false,
                    id: 4
                }],
                current: 0,
                list: [
					// {},
					// {}
				], 
                
                upOption: {
                    auto: false, // 不自动加载
                    noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
                    empty: {
                        icon: '/static/images/empty/gift.png',
                        tip: '暂无评论', // 提示
                        fixed: true,
                        top: "200rpx",
                    }
                }
            }
        },

		async onLoad() {
			await this.getNvas();
		},
		
        methods: {
			// 预览
			previewImage: function(index,imgs) {
				uni.previewImage({
					current: index, //预览图片的下标
					urls: imgs //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			getNvas(){
				plfl().then(res => {
					this.lists[0].name = `全部(${res.comment[0].count})`
					this.lists[1].name = `好评(${res.comment[1].count})`
					this.lists[2].name = `中评(${res.comment[2].count})`
					this.lists[3].name = `差评(${res.comment[3].count})`
					// 防止获取不到mescroll
					setTimeout(() => {
						this.mescroll.resetUpScroll();
					}, 200);
				});
			},
            change(index) {
                for (let i = 0; i < this.lists.length; i++) {
                    this.lists[i].isShow = false
                }
                this.current = index;
                this.lists[index].isShow = true;
				
				this.upCallback({
				    num: 1,
				    size: 10
				});
            },

            upCallback({num, size}) {
                plList({
                    star: this.lists[this.current].id,
                    page_no: num,
                    page_size: size
                }).then(res => {
                    if (num == 1) this.list = []; //如果是第一页需手动置空列表
                    this.list = this.list.concat(res.lists); //追加新数据
                    this.mescroll.endSuccess(res.lists.length, res.count);
                }).catch(err => {
                    this.mescroll.endErr()
                })
            },
        }
    }
</script>

<style lang="scss">
    .speck-list {
        padding: 0 24rpx;
        overflow: hidden;
		
		.headimg{
			width: 74rpx;
			height: 74rpx;
			border-radius: 50%;
		}
		.boxes{
			background-color: #fff;
			padding: 30rpx 26rpx;
		}
    }
</style>
